<template>
  <div>
    <v-header></v-header>
    <div class="search">
      <search></search>
    </div>

    <div class="main">
      <!-- 侧边栏 -->
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="item in asideData"
            :key="item.id"
            
            :title="item.catename"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <!-- ============= -->
        <div class="right_div1">
          <div class="p1">
            <p>{{getCates_first}}</p>
            <div class="grid">
              <van-grid :border="false" :column-num="3">
                <van-grid-item  @click="$router.push(`/list?type=${item.catename}&cateid=${item.id}`)" v-for="item in getCates_second" :key="item.id">
                  <van-image id="it" :src="_localhost+ item.img "  />
                  <span>{{item.catename}}</span>
                </van-grid-item>
  
              </van-grid>
            </div>
          </div>
        </div>
        <!-- ============= -->
        
      </div>
    </div>
  </div>
</template>

<script>
import search from "../../components/search.vue";

// 
import {getCates} from '@/request/api.js'

export default {
  components: { search },
  data() {
    return {
      activeKey: 1,
      asideData: [
        { id: "01", catename: "手机通讯" },
        { id: "02", catename: "生活家电" },
        { id: "03", catename: "家居" },
        { id: "04", catename: "服装" },
        { id: "05", catename: "电视" },
        { id: "06", catename: "空调" },
        { id: "07", catename: "手机通讯" },
      ],
      second_cates:[],
    };
  },
  async  created(){
    this.activeKey = this.$route.query.num
    // 分类页 一级分类信息
    let getCatesRes = await getCates()
    this.asideData = getCatesRes.data.list

    // console.log(11,getCatesRes);
    // 二级分类信息
    this.second_cates = this.asideData[this.activeKey].children
    // console.log(22,this.second_cates);
  },
  methods: {
  },
  computed:{
    getCates_first(){
      return this.asideData[this.activeKey].catename;
    },
    getCates_second(){
      return this.asideData[this.activeKey].children ?this.asideData[this.activeKey].children:[]
    }
  }
};
</script>

<style scoped lang="less">
.van-search {
  background-color: #0000;
}
.search {
  background-color: orangered;
}
.main {
  width: 100vw;
  background-color: #ccc;
  .left {
    float: left;
  }
  .right {
    float: left;
    background-color: #eee;
    width: 75vw;
    padding: .15rem;
    box-sizing: border-box;
    .p1{
      padding: .05rem;
      box-sizing: border-box;
      background-color: #fff;
      margin-bottom: .1rem;
      p{
        font-weight:600 ;
      }
      .grid{
        box-sizing: border-box;
        span{
          width: .4rem;
          height: .2rem;
          display: inline-block;
          padding-top: .05rem ;
          font-size: .12rem;
          box-sizing: border-box;
          text-align: center;
        }
      }
      
    }
  }
}
</style>